<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flight Status</title>
        <link rel="stylesheet" href="./css/airline.css">
        <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
        <script src="./js/jquery-3.4.1.min.js"></script>
        <script src="./js/sunshine.js"></script>
        <script src="./js/flightStatus.js"></script>
    </head>
    <body>
        <div class="top">
            <div class="logo">
                <img class="logoimg" src="./image/logo/logo1.png" alt="">
            </div>   
            <div class="status">
              Office User Menu
            </div>
        </div>
        <div class="menulist">
            <a href="OfficeUserMenu.html"><div class="list_sf">Search Flights</div></a>
            <div class="list_sf" style="color: #F79420;">Flight Status</div>
            <div class="list_out">Logout</div>
        </div>
        <div class="searchlist" style="display: block;" >
            <div class="optiondate" style="width: 150px; float: left;"> 
                <p style="line-height: 30px;">Departure Date：</p>
                <input class="departureDate" style="width: 120px;" type="date" value="2019-08-16"/>
                <i class="fa fa-calendar" aria-hidden="true"></i>
            </div>
            <div class="searchbutton" style="float: left;">
                <input type="button" name="" id="searchFlightStatus" value="Search" />
            </div>
        </div>
        <div class="msglist" style="height: 420px;">
            
            <div class="formclass">
                <table >
                    <thead>
                        <tr class="thead">
                            <th>No</th>
                            <th>Flight Number</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Schedule Start</th>
                            <th>Schedule Arrival</th>
                            <th>Actual Arrival</th>
                            <th>Gate</th>
                            <th>Status</th>    
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr class="tdcolor">
                            <td>1</td>
                            <td>101</td>
                            <td>Beijing/PEK</td>
                            <td>Rome/CIA</td>
                            <td>05:00</td>
                            <td>09:00</td>
                            <td>09:05</td>
                            <td>F10</td>
                            <td>Delay 5 minutes</td>
                            
                        </tr> -->
                        <!-- <tr class="tdcolor1">
                            <td>2</td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            
                        </tr>
                        <tr class="tdcolor">
                            <td>3 </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            
                        </tr>
                        <tr class="tdcolor1">
                            <td> 4</td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            
                        </tr>
                        <tr class="tdcolor">
                            <td> 5</td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            
                        </tr>
                        <tr class="tdcolor1">
                            <td>6 </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>    
                        </tr>
                        <tr class="tdcolor">
                            <td> 7</td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>    
                        </tr>  
                        <tr class="tdcolor1">
                            <td> 8</td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>    
                        </tr>
                        <tr class="tdcolor">
                            <td> 9</td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>    
                        </tr>  
                        <tr class="tdcolor1">
                            <td> 10</td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>
                            <td> </td>    
                        </tr> -->
                    </tbody>                    
                </table>
            </div>
            <div class="pagemsg"> 
                <div class="pageicon">
                    <div class="prev step-backward">
                        <i class="fa fa-step-backward" aria-hidden="true"></i>
                    </div>
                    <div class="prev chevron-left">
                        <i class="fa fa-chevron-left" aria-hidden="true"></i>
                    </div>
                    <div class="NUM">
                        <select class="pages" style="width:80px; ">
                            <option  value="volvo">1</option>
                        </select>    
                    </div>
                    <div class="prev chevron-right">
                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                    </div>
                    <div class="prev step-forward">
                        <i class="fa fa-step-forward" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="totalpage">
                    <span>
                        Total Pages：
                    </span>
                    <span class="pages">
                        10
                    </span>
                    <span>
                        Total Records:
                    </span>
                    <span class="totals">
                        200
                    </span>
                </div>
            </div>
        </div>
       
    </body>
</html>